在陣列中,若需要訪問組數中的每個元素可以使用for迴圈完成,而本篇將介紹更有效的執行方式高階函式forEach進行資料處理。
先說說什麼式高階函數(higher order function)
取自維基百科
在數學和計算機科學中,高階函數是至少滿足下列一個條件的函數:
var dogs = ["芒狗", "奇異狗", "蘋狗"];
// 此時的i為全域變數
for (var i = 0; i < dogs.length; i++) {
dogs[i] += "是一種小狗";
let item = dogs[i];
console.log(item);
}
此時的for loop
可能會產生全域變數 在ES6後則可使用let
及const
來解決作用域的問題。
使用forEach
時可以用更簡短的寫法達到相同的效果,以下將會介紹其寫法及注意內容。
若同樣的情況使用forEach
完成
var dogs = ["芒狗", "奇異狗", "蘋狗"];
dogs.forEach(function(item) {
console.log(`${item}是一種小狗`);
});
大多情況下較長使用到前兩個參數item
、index
let data = [data1,data2,data3];
data.forEach(function(item, index, array){
/*
依陣列資料長度決定function跑幾次 而其中參數名稱也可以作替換
item 值-取出陣列中的元素
index 索引-在陣列中的第幾筆資料
array 整個陣列內容
*/
console.log(item,index,array)
})
只能從頭開始訪問每個元素,若遇特定數值須中斷時可改用for loop
讀取陣列並加上break
再使用三個參數的範例說明
words = ["dog", "on", "carpet"];
words.forEach(function(word, num, all) {
console.log("Word " + num + " in " + all.toString() + " is " + word);
});
/*
Word 0 in dog,on,carpet is dog
Word 1 in dog,on,carpet is on
Word 2 in dog,on,carpet is carpet
*/
/*
word 取出陣列中的元素內容
num 取出陣列中的元素次序
all 整筆陣列內容
*/
forEach()
不返回任何內容,若嘗試使用return
返回值,將得到undefined
let a = [1, 2, 3];
a.forEach(function(item, index, array){
return item*2;
console.log(a);
});
下一篇將會介紹可以使用return
並且不會改變原陣列的map( )
若本篇介紹有任何問題歡迎指教~